<template>
    <section class="circle-post">
        <Header style="z-index:1025">
            <header-menu></header-menu>
        </Header>
        <top-search :navlist="NavTitle"></top-search>
        <user-nav :list="list"></user-nav>
        <cricle-top></cricle-top>
        <div class="container post">
            <p>发表内容</p>
            <div style="width: 1000px; margin-left: 170px">
                <Form :model="formItem" :label-width="80">
                    <FormItem label="标题：">
                        <Input v-model="formItem.title"  placeholder="输入价格..."></Input>
                    </FormItem>
                    <FormItem label="购买项目：">
                        <Select v-model="formItem.pro" style="width:300px;margin-right: 5px" @on-change="selpro">
                            <Option v-for="item in proList" :value="item.id" :key="item.id" >{{ item.name }}</Option>
                        </Select>
                        <Select v-model="formItem.city" style="width:300px;margin-right: 5px" @on-change="selcity">
                            <Option v-for="item in cityList" :value="item.id" :key="item.id" >{{ item.name }}</Option>
                        </Select>
                        <Select v-model="formItem.dis" style="width:300px" @on-change="selc">
                            <Option v-for="item in disList" :value="item.id" :key="item.id" >{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="正文：">
                        <div id="editorElem"></div>
                        <!--<Input v-model="formItem.content" type="textarea" :autosize="{minRows: 4}" placeholder="日记正文..." ></Input>-->
                    </FormItem>
                    <FormItem label="显示状态：">
                        <Radio v-model="single">公开</Radio>
                    </FormItem>
                    <FormItem label=''>
                        <p style="color: #FE5371">关联我的美丽日记<Icon type="ios-arrow-down" /></p>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" style="width: 200px" @click="subimt">发布</Button>
                    </FormItem>
                </Form>
            </div>
         </div>
    <bottom-icon></bottom-icon>
    <Footer>
        <page-footer></page-footer>
    </Footer>
    </section>
</template>

<script>
    import E from 'wangeditor'
    import HeaderMenu from '@/components/Header/'
    import PageFooter from '../../components/Footer/'
    import BottomIcon from '../../components/BottomIcon/'
    import TopSearch from '../../components/TopSearch/'
    import userNav from '../../components/Usertop/userNav'
    import CricleTop from '../../components/Circle/Cricle-top'
    export default {
        name: "Post",
        components: {
            PageFooter,
            BottomIcon,
            HeaderMenu,
            userNav,
            TopSearch,
            CricleTop
        },
        data () {
            return {
                list: [
                    {id:1,name:"广场",show:false,path:'/circle',
                        child: {id:4,name:"帖子详情",show:false,path:'/circledelist',
                            child: {id:4,name:"报名人数",show:false,path:''},
                        },
                    },
                    {id:2,name:"活动",show:true,path:'/activity',
                        child: {id:4,name:"活动详情",show:false,path:'/activitydelists',
                            child: {id:4,name:"报名人数",show:false,path:'/activityregistration'},
                        },
                    },
                    {id:3,name:"专题",show:false,path:'/special',
                        child: {id:4,name:"活动详情",show:false,path:'/specialdelist',
                            child: {id:4,name:"报名人数",show:false,path:''},
                        },
                    },
                    {
                        id: 4, name: "达人", show: false, path: '/aman',
                        child: {id: 4, name: "达人详情", show: false, path: '/amandelists',
                            child: {id:4,name:"报名人数",show:false,path:''},
                        }
                    }
                ],
                toplist: [
                    {id:1,num:12345,altogether:123456,type:1},
                ],
                NavTitle:{
                    id:1,
                    name:'圈子',
                    title:'越泡越美  越美越泡',
                    text:'写帖子',
                    mytext:'我的帖子',
                    type:5
                },
                formItem:{},
                pid:0,
                city:'',
                dis:'',
                por:'',
                disList:[],
                proList:[],
                cityList:[],
                single:true,
                ids:"",
                id:'',
                editorContent:""
            }
        },
        created () {
            this.adrass()
            this.getinfo()
        },
        methods :{
            subimt () {
                let _this =this
                this.$post('/api/circle/addPost',
                    {
                        token:_this.$token,
                        projectgroup_id:_this.por,
                        circle_id:_this.id,
                        title:_this.formItem.title,
                        content:_this.formItem.content,
                        post_id:_this.ids
                    }, function (res) {
                        _this.$message.success(res.msg);
                        _this.$router.push({path: '//my/mygroup/topiclist'})
                    }, function (errcode, errmsg,err) {
                        console.log(err)
                        console.log(errmsg)
                    })

            },
            adrass () {
                let _this =this
                this.$post('/api/project/project_type',
                    {
                        pid:_this.pid,
                    }, function (res) {
                        _this.proList = res.data
                    }, function (errcode, errmsg,err) {
                        console.log(err)
                        console.log(errmsg)
                    })
            },
            diss () {
                let _this =this
                this.$post('/api/project/project_type',
                    {
                        pid:_this.dis,
                    }, function (res) {
                        _this.disList = res.data
                    }, function (errcode, errmsg,err) {
                        console.log(err)
                        console.log(errmsg)
                    })
            },
            citys () {
                let _this =this
                this.$post('/api/project/project_type',
                    {
                        pid:_this.city,
                    }, function (res) {
                        _this.cityList = res.data
                    }, function (errcode, errmsg,err) {
                        console.log(err)
                        console.log(errmsg)
                    })
            },
            selpro (value) {
                this.city = value
                this.citys()
            },
            selcity (value) {
                this.dis = value
                this.diss()
            },
            selc (value){
                this.por = value
                if(this.idlist == ''){
                    this.idlist = value
                }else {
                    this.idlist =this.idlist+','+ value
                }
            },
            getinfo () {
                this.ids = this.$route.query.ids
                this.id = this.$route.query.cid
                let _this =this
                this.$post('/api/circle/postInfo',
                    {
                        post_id:_this.ids
                    }, function (res) {
                         console.log(res)
                        _this.formItem = res.data
                        _this.editorContent = res.data.content
                        var editor = new E('#editorElem')
                        editor.create()
                        editor.txt.html(_this.editorContent)
                    }, function (errcode, errmsg,err) {
                        console.log(err)
                        console.log(errmsg)
                    })
            }
        },
        mounted() {
            var editor = new E('#editorElem')
            editor.customConfig.onchange = (html) => {
                this.editorContent = html
            }
            editor.customConfig.zIndex = 0
            editor.customConfig.uploadImgServer = this.$IUrl  // 上传图片到服务器
            editor.customConfig.uploadFileName = 'file';
            editor.customConfig.uploadImgHooks = {
                customInsert: function (insertImg, result, editor) {
                    var url = result.data[0]
                    insertImg(url)
                }
            }
            editor.create()

        }
    }
</script>

<style scoped lang="less">
    @import "../../style/style";
    .post{
        >p{
            font-size: 18px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #333333;
            padding-bottom: 10px;
            border-bottom: 1px solid #FE91A5;
            margin-bottom: 20px;
        }
        .post-text{
            padding-left: 100px;
            margin-top: 10px;
            padding-bottom: 60px;
            >:first-child{
                padding-left: 30px;
            }
            >:last-child{
                background-color: #ff5371;
                border-radius: 4px;
                font-size: 20px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #ffffff;
                padding: 5px 35px;
                margin-left:85px;
            }
            span{
                display: block;
                float: left;
                font-size: 16px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #333333;
                margin-right: 10px;
            }
            textarea{
                width: 990px;

            }
            input{
                margin-top: 5px;
                margin-right: 3px;
            }
            p{
                font-size: 14px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: @theme-color-dark;
                padding: 5px 0 20px 87px;
            }
        }
    }
</style>